<template>
  <view
    class="popup-container"
    :style="{ bottom: show ? 0 : -popupDefaultHeight + 'px', height: popupHeight + 'px' }"
  >
    <view class="popup-header" @click="emit('hideList')">
      <view class="line"></view>
    </view>
    <!-- 切换列表 -->
    <view class="show-map" @click="emit('hideList')">
      <text class="ali-icon">&#xe65d;</text>
      <text>查看地图</text>
    </view>
    <scroll-view
      class="card-list"
      id="scrollViewId"
      scroll-y
      :enhanced="true"
      :show-scrollbar="false"
      scroll-with-animation
      @scrolltolower="scrolltolower"
    >
      <template v-for="v in members" :key="v.memberLeadingId">
        <view :id="viewIdSelf + v.memberLeadingId">
          <MemberCardItem
            v-if="contactsType === ContactsTypeEnum.PERSON"
            :source-type="sourceType"
            :item="v"
            type="list"
          />
          <CompanyCardItem v-else :item="v" type="list" :source-type="sourceType" />
          <view class="line"></view>
        </view>
      </template>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import type { MemberContactsVoList } from '@/api/contactsMap/types';
  import { propTypes } from '@/utils/propTypes';
  import { type PropType, ref, watch, getCurrentInstance } from 'vue';
  import MemberCardItem from './MemberCardItem.vue';
  import { ContactsTypeEnum, SourceTypeEnum } from '@/enums/contactsEnum';
  import CompanyCardItem from './CompanyCardItem.vue';

  const props = defineProps({
    current: propTypes.number.def(0),
    showMoreView: propTypes.bool.def(false),
    show: propTypes.bool.def(false),
    contactsType: {
      type: Number as PropType<ContactsTypeEnum>,
      default: ContactsTypeEnum.PERSON,
    },
    sourceType: Number as PropType<SourceTypeEnum>,
    members: Array as PropType<MemberContactsVoList[]>,
  });

  const emit = defineEmits(['hideList', 'loadMore']);

  const viewIdSelf = ref('viewId_');
  const popupDefaultHeight = ref(400);
  const popupHeight = ref(popupDefaultHeight.value);

  const _this = getCurrentInstance() as unknown as WechatMiniprogram.Component.TrivialInstance;
  const scrollViewContext = ref<WechatMiniprogram.ScrollViewContext | null>(null);
  const query = uni.createSelectorQuery().in(_this);
  query
    .select('#scrollViewId')
    .node((res) => {
      scrollViewContext.value = res.node;
    })
    .exec();

  watch(
    () => props.members,
    (val) => {
      if (val?.length) scrollViewContext.value?.scrollTo({ top: 0 });
    },
  );

  function scrolltolower() {
    // if (props.showMoreView) {
    //   emit('loadMore');
    // }
  }
</script>

<style lang="scss" scoped>
  .popup-container {
    position: absolute;
    left: 0;
    bottom: -v-bind(300) px;
    z-index: 99;
    width: 100vw;
    background: #ffffff;
    transition: all 0.3s;
    max-height: calc(100% - 30rpx);
    min-height: 60rpx;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    .popup-header {
      height: 40rpx;
      padding-top: 20rpx;
      .line {
        margin: 0 auto;
        width: 188rpx;
        height: 8rpx;
        background-color: #dddddd;
        border-radius: 100rpx;
      }
    }

    .show-map {
      position: absolute;
      right: 30rpx;
      bottom: 60rpx;
      width: 206rpx;
      height: 72rpx;
      background: #ffffff;
      border-radius: 20rpx;
      text-align: center;
      line-height: 72rpx;
      font-size: 28rpx;
      color: #333;
      box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.25);
      z-index: 9;
      .ali-icon {
        margin-right: 6rpx;
        font-size: 36rpx;
      }
    }
  }

  .card-list {
    width: 100%;
    height: calc(100% - 60rpx);
    .line {
      height: 1px;
      background-color: #f5f5f5;
      margin: 0 30rpx;
    }
  }
</style>
